<!DOCTYPE html>
<html lang="zh-CN" >
<head>

<meta charset="UTF-8">
<!-- mobile user-scalable=no: user can not drap & drop -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>singleWordList</title>

<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../common/css/kkpager_orange.css" />

<script type="text/javascript" src="../common/js/jQuery-2.2.0.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="../common/js/kkpager.js"></script>
</head>
<body>
	<div ng-app="mainApp" ng-controller="mainController" id="mainController" class="container-fluid">
		<div class="table-responsive">
			<table class="table table-bordered table-hover">
				<caption>My Word</caption>
				<thead>
					<tr>
						<td>WORD</td>
						<td>MEANING</td>
						<td>OEPRATION</td>
					</tr>
				</thead>
				<tbody>
				
				<tr ng-repeat="item in items">
					<td>{{item.name}}</td>
					<td>{{item.meaning}}</td>
					<td><button type="button" ng-click="deleteById(item.id)" >DELETE</button></td>
				</tr>
				</tbody>
			</table>
		</div>
		<input id="pageIndex" type="hidden" name="pageIndex" ng-bind="pageIndex" value="" />
		<div id="kkpager">
		</div>
	</div>

</body>
<script>

//定义一个模块
var mainApp = angular.module("mainApp", []);

mainApp.controller("mainController", function($scope, $http) {
    $http({
    	url: 'page/1/10', 
    	method: 'post', 
    	params: {name: ''}
	}).success(function(response) {
		$scope.items = eval('(' + response + ')').t;
	});
    
    // 只有 insert，delete，pageSize改变的情况下，重新取pageData，其余情况下不用重新去取该数据
    // 获取分页信息
    $http({
    	url: 'pageData/1/10', 
    	method: 'post', 
    	params: {name: ''}
    }).success(function(response) {
    	var data = eval('(' + response + ')').t;
    	$scope.pageIndex = data.pageIndex;
    	createPage($scope, $http, data);
    });
    
    $scope.deleteById = function(id) {
    	console.log(id);
    	$http({
    		url: id + '/delete', 
    		method: 'post'
    	}).success(function(response) {
    		console.log(response);
    	});
    }
});

var createPage = function($scope, $http, pageData) {
	//生成分页
	//有些参数是可选的，比如lang，若不传有默认值
	kkpager.generPageHtml({
		pno : $scope.pageIndex,
		//总页码
		total : pageData.pageCount,
		//总数据条数
		totalRecords : pageData.count,
		mode : 'click', 
		click	: function(n){
			$http({
				url: 'page/' + n + '/10', 
				method: 'post'
			}).success(function(response) {
				console.log(eval('(' + response + ')').t);
				$scope.items = eval('(' + response + ')').t;
				$scope.pageIndex = n;
				kkpager.selectPage(n);
			});
		}
	});
}

</script>
</html>